<!--
 * @Author: daidai
 * @Date: 2022-03-01 09:43:37
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-09-09 11:40:22
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\left-bottom.vue
-->
<template>


    <div id="main" style="width: 100%;height: 100%;" v-if="pageflag"/>
    <Reacquire v-else @onclick="getData" style="line-height: 200px"/>
</template>

<script>
import {currentGET} from "api";
import vueSeamlessScroll from "vue-seamless-scroll"; // vue2引入方式
import * as echarts from 'echarts'


export default {
    // components: { vueSeamlessScroll, Kong },
    data() {
        return {
            pageflag: true,
            jiaozhigong: [],
            zaixiaosheng: [],
            meishiwan: [],
            option: {},
            drilldownData: [],
            jiaozhigongAvg:0,
            zaixiaoshengAvg:0,
            meishiwanAvg:0,


        };
    },
    created() {
        this.getData()
    },
    watch :{
        zaixiaosheng:{
            handler(value){

            }
        }
    },
    mounted() {

    },
    methods: {
        getData() {
            currentGET('leftBottom', {}).then(res => {
                if (res.code == 200) {
                    console.log('左下角分裂图成功', res.data);
                    let sum=0;
                    for (let i = 0; i < res.data.slice(0, 4).length; i++) {
                        this.jiaozhigong.push([res.data.slice(0, 4)[i].name, res.data.slice(0, 4)[i].value])
                        sum=sum+ Number(res.data.slice(0, 4)[i].value)

                    }

                    this.jiaozhigongAvg=sum%4;
                    sum=0
                    // console.log('jiaozhigong', this.jiaozhigong);

                    for (let i = 0; i < res.data.slice(4, 8).length; i++) {
                        this.zaixiaosheng.push([res.data.slice(4, 8)[i].name, res.data.slice(4, 8)[i].value])
                        sum=sum+Number(res.data.slice(4, 8)[i].value)
                    }
                    this.zaixiaoshengAvg=sum%4;
                    sum=0
                    // console.log('zaixiaosheng', this.zaixiaosheng);
                    for (let i = 0; i < res.data.slice(8, 12).length; i++) {
                        this.meishiwan.push([res.data.slice(8, 12)[i].name, res.data.slice(8, 12)[i].value])
                        sum=sum+Number(res.data.slice(8, 12)[i].value)
                    }
                    this.meishiwanAvg=sum%4;
                    this.meishiwanAvg= this.meishiwanAvg.toFixed(2)

                    this.pageflag = true
                    this.initMap()
                } else {
                    this.pageflag = false
                    this.$Message.warning(res.msg)
                }
            });

        },
        initMap() {
            const chartDom = document.getElementById('main');
            const myChart = echarts.init(chartDom);
            let option;

            let jiaozhigong=this.jiaozhigongAvg;
            let zaixiaosheng=this.zaixiaoshengAvg;
            let meishiwan=this.meishiwanAvg;


            option = {
                tooltip: {
                    show: true,
                    formatter: function (params) {
                        return params.marker + params.name + '增长率:           ' + params.data.value + '%'
                    }
                },
                xAxis: [{
                    data: ['教职工数平均', '在校生人数平均', '每十万人口在校生人数平均'],
                    axisLine: {//x轴样式
                        show: true,
                        lineStyle: {
                            color: "#60a8bd",
                            width: 1,
                            type: "solid"
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: "#ffffff",
                        },
                        interval: 0,
                        formatter: function (value) {
                            // debugger
                            var ret = "";//拼接加\n返回的类目项
                            var maxLength = 5;//每项显示文字个数
                            var valLength = value.length;//X轴类目项的文字个数
                            var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
                            if (rowN > 1)//如果类目项的文字大于3,
                            {
                                for (var i = 0; i < rowN; i++) {
                                    var temp = "";//每次截取的字符串
                                    var start = i * maxLength;//开始截取的位置
                                    var end = start + maxLength;//结束截取的位置
                                    temp = value.substring(start, end) + "\n";
                                    ret += temp; //凭借最终的字符串
                                }
                                return ret;
                            } else {
                                return value;
                            }
                        },

                    },
                }],
                yAxis: [{
                    type: 'value',
                    axisLabel: {
                        formatter: '{value} '
                    },
                    axisLine: {//y轴样式
                        show: true,
                        lineStyle: {
                            color: "#60a8bd",
                            width: 1,
                            type: "solid"
                        },
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {//格线样式
                        lineStyle: {
                            color: "#60a8bd",
                        }
                    }
                }],

                dataGroupId: '',
                animationDurationUpdate: 500,
                grid: {
                    left: "30px",
                    right: "10px",
                    bottom: "30px",
                    top: "40px",
                },
                series: {
                    type: 'bar',
                    id: 'sales',
                    data: [
                        {
                            value: jiaozhigong,
                            groupId: '教职工数'
                        },
                        {
                            value: zaixiaosheng,
                            groupId: '在校生人数'
                        },
                        {
                            value: meishiwan,
                            groupId: '每十万人口在校生人数平均'
                        }
                    ],
                    universalTransition: {
                        enabled: true,
                        divideShape: 'clone'
                    },
                    itemStyle: {//柱样式

                        borderRadius: [5, 5, 5, 5],
                        color: function (params) {//渐变色，也可以直接用数组给不同的柱子设置不同的颜色
                            var colorList = [
                                new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#00e6ff'
                                }, {
                                    offset: 1,
                                    color: '#018dff'
                                }]),
                                new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#00fcae'
                                }, {
                                    offset: 1,
                                    color: '#006388'
                                }]),
                                new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#97fc00'
                                }, {
                                    offset: 1,
                                    color: '#5b8800'
                                }]),
                                new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#891ffa'
                                }, {
                                    offset: 1,
                                    color: '#220088'
                                }]),
                                new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#00b0fc'
                                }, {
                                    offset: 1,
                                    color: '#004488'
                                }])


                            ];
                            return colorList[params.dataIndex];
                        },

                    },
                }
            };

            const drilldownData = [
                {
                    dataGroupId: '教职工数',
                    data: this.jiaozhigong
                },
                {
                    dataGroupId: '在校生人数',
                    data: this.zaixiaosheng
                },
                {
                    dataGroupId: '每十万人口在校生人数平均',
                    data: this.meishiwan
                }
            ];


            myChart.on('click', function (event) {
                if (event.data) {
                    var subData = drilldownData.find(function (data) {
                        return data.dataGroupId === event.data.groupId;
                    });
                    if (!subData) {
                        return;
                    }
                    myChart.setOption({
                        xAxis: {
                            data: subData.data.map(function (item) {
                                return item[0];
                            })
                        },
                        grid: {
                            left: "30px",
                            right: "10px",
                            bottom: "30px",
                            top: "40px",
                        },
                        series: {
                            type: 'bar',
                            id: 'sales',
                            dataGroupId: subData.dataGroupId,
                            data: subData.data.map(function (item) {
                                return item[1];
                            }),
                            universalTransition: {
                                enabled: true,
                                divideShape: 'clone'
                            }
                        },
                        tooltip: {
                            show: true,
                            formatter: function (params) {
                                return params.marker + params.name + '增长率:           ' + params.data + '%'
                            }
                        },
                        graphic: [
                            {
                                type: 'text',
                                left: 20,
                                top: 10,
                                style: {
                                    text: 'Back',
                                    fontSize: 18,
                                    fill: 'rgb(255,255,255)'
                                },
                                onclick: function () {
                                    myChart.setOption(option);
                                }
                            }
                        ]
                    });
                }
            });

            option && myChart.setOption(option);

        }
    }

}

</script>

<style lang='scss' scoped>
.left_boottom_wrap {
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.doudong {
  //  vertical-align:middle;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
}

.overflow-y-auto {
  overflow-y: auto;
}

.left_boottom {
  width: 100%;
  height: 100%;

  .left_boottom_item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    font-size: 14px;
    margin: 10px 0;

    .orderNum {
      margin: 0 16px 0 -20px;
    }

    .info {
      margin-right: 10px;
      display: flex;
      align-items: center;
      color: #fff;

      .labels {
        flex-shrink: 0;
        font-size: 12px;
        color: rgba(255, 255, 255, 0.6);
      }

      .zhuyao {
        color: $primary-color;
        font-size: 15px;
      }

      .ciyao {
        color: rgba(255, 255, 255, 0.8);
      }

      .warning {
        color: #e6a23c;
        font-size: 15px;
      }
    }

    .inner_right {
      position: relative;
      height: 100%;
      width: 380px;
      flex-shrink: 0;
      line-height: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;

      .dibu {
        position: absolute;
        height: 2px;
        width: 104%;
        background-image: url("../../assets/img/zuo_xuxian.png");
        bottom: -10px;
        left: -2%;
        background-size: cover;
      }

      .addresswrap {
        width: 100%;
        display: flex;
        margin-top: 8px;
      }
    }

    .wangguan {
      color: #1890ff;
      font-weight: 900;
      font-size: 15px;
      width: 80px;
      flex-shrink: 0;
    }


    .time {
      font-size: 12px;
      // color: rgba(211, 210, 210,.8);
      color: #fff;
    }

    .address {
      font-size: 12px;
      cursor: pointer;
      // @include text-overflow(1);
    }

    .types {
      width: 30px;
      flex-shrink: 0;
    }

    .typeRed {
      color: #fc1a1a;
    }

    .typeGreen {
      color: #29fc29;
    }
  }
}
</style>